<template>
  <div class="register">
    <div class="rightView">
      <div class="textAlignCenter marginBottom40">
        <img src="@/assets/logo/logo-title.png" alt="" width="215" height="42">
      </div>
      <h3 class="title">外省市事务所</h3>
      <h3 class="title">申请注册用户</h3>
      <el-form ref="form"
               :model="form"
               :rules="rules"
               :label-position="labelPosition"
               class="register-form">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item prop="firmName" label="事务所名称">
              <el-input v-model="form.firmName" type="text" auto-complete="off" placeholder="请输入事务所名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="province" label="省/自治区/直辖市">
              <el-select v-model="form.province" placeholder="请选择省/自治区/直辖市">
                <el-option
                  v-for="(item,index) in province"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="mailingAddress" label="地址">
              <el-input v-model="form.mailingAddress" type="text" auto-complete="off" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="unifiedSocialCreditCode" label="统一社会信用代码">
              <el-input v-model="form.unifiedSocialCreditCode" type="text" auto-complete="off" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="practiceCertificateNo" label="事务所执业证书编号">
              <el-input v-model="form.practiceCertificateNo" type="text" auto-complete="off" placeholder="请输入事务所执业证书编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contacts" label="联系人">
              <el-input v-model="form.contacts" type="text" auto-complete="off" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phoneNumberOfContactPerson" label="联系人手机号">
              <el-input v-model="form.phoneNumberOfContactPerson" maxlength="11" type="text" auto-complete="off" placeholder="请输入联系人手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height:100px;display: flex;align-items: flex-start;
    flex-direction: column;">
            <div class="filt-wrap" style=" height: 46px;
    line-height: 36px;
    color: #69718B;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 14px;">
              文件下载
            </div>
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="templateofficeRegister"
              style="width: 100%;height: 40px;"
            >申请材料清单下载
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="registerUploadFileId" label="上传材料（压缩包格式）">
              <el-upload
                class="upload-demo"
                ref="uploadPracticeCertificate"
                :action="upload.url"
                :before-upload="beforeAvatarZipUpload"
                :on-change="handleChangeZip"
                :on-success="handleFileSuccessZip"
                :on-error="handleFileErrorZip"
                :on-remove="handleRemoveZip"
                :file-list="fileListZip"
                :multiple="false"
                :accept="'application/x-zip-compressed'"
              >
                <el-button slot="trigger" size="small" type="primary" plain class="uploadBtn">上传材料</el-button>
              </el-upload>

            </el-form-item>
          </el-col>
          <!--<el-col :span="12">
            <el-form-item prop="registerCertificateOneFileId" label="签字注会1证书">
              <el-upload
                class="upload-demo"
                ref="uploadregisterOne"
                :action="upload.url"
                :before-upload="beforeAvatarUpload"
                :on-change="handleChange3"
                :on-success="handleFileSuccess3"
                :on-error="handleFileError3"
                :on-remove="handleRemove3"
                :file-list="fileList3"
                :multiple="false"
                :accept="'image/png, image/jpeg,application/pdf'"
              >
                <el-button slot="trigger" size="small" type="primary" plain class="uploadBtn">上传签字注会1证书</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="registerCertificateTwoFileId" label="签字注会2证书">
              <el-upload
                class="upload-demo"
                ref="uploadregisterTwo"
                :action="upload.url"
                :before-upload="beforeAvatarUpload"
                :on-change="handleChange4"
                :on-success="handleFileSuccess4"
                :on-error="handleFileError4"
                :on-remove="handleRemove4"
                :file-list="fileList4"
                :multiple="false"
                :accept="'image/png, image/jpeg,application/pdf'"
              >
                <el-button slot="trigger" size="small" type="primary" plain class="uploadBtn">上传签字注会2证书</el-button>
              </el-upload>

            </el-form-item>
          </el-col>-->
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="code" label="验证码">
                  <el-input
                    v-model="form.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%"
                    @keyup.enter.native="handleRegister"
                  />
                  <div class="register-code">
                    <img :src="codeUrl" @click="getCode" class="register-code-img"/>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="fontSize14">
                <span class="displayBlock marginTop55">已有账户？<router-link :to="{ path: '/login' }" class="colorLink">登录？</router-link></span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleRegister"
          >
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>
</template>

<script>
  import { getCodeImg } from "@/api/login";
  import { registerOffice } from "@/api/system/office";
  import {getToken} from "@/utils/auth";

  export default {
    name: "Register",
    data() {
     /* let practiceFile = (rule, value, callback) => {
        value = this.form.practiceCertificateFileId
        if (!value) {
          return callback(new Error('请上传事务所执业证书'));
        }
        callback();
      };
      let accountantFile = (rule, value, callback) => {
        value = this.form.accountantCertificateFileId
        if (!value) {
          return callback(new Error('请上传社会信用代码证'));
        }
        callback();
      };
      let registerOneFile = (rule, value, callback) => {
        value = this.form.registerCertificateOneFileId
        if (!value) {
          return callback(new Error('请上传签字注会1证书'));
        }
        callback();
      };
      let registerTwoFile = (rule, value, callback) => {
        value = this.form.registerCertificateTwoFileId
        if (!value) {
          return callback(new Error('请上传签字注会2证书'));
        }
        callback();
      };*/
      let registerUploadFile = (rule, value, callback) => {
        value = this.form.registerUploadFileId
        if (!value) {
          return callback(new Error('请上传相关材料'));
        }
        callback();
      };
      return {
        codeUrl: "",
        labelPosition: "top",
        form: {
          code: '',
          uuid: "",
          practiceCertificateFileId:"",
          accountantCertificateFileId:""

        },
        province:["北京市","天津市","重庆市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区"],

        rules: {
          firmName: [
            { required: true, trigger: "blur", message: "事务所名称不能为空" },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],
          code: [
            { required: true, trigger: "blur", message: "验证码不能为空" }
          ],
        /*  officeNumber: [{ required: true, trigger: "blur", message: "事务所编号不能为空" }], // 事务所编号*/
          practiceCertificateNo: [{ required: true, trigger: "blur", message: "事务所执业证书编号不能为空" }], // 事务所执业证书编号
     /*     practiceCertificateFileId: [{validator: practiceFile, trigger: 'change'},], // 事务所执业证书
          accountantCertificateFileId: [{validator: accountantFile, trigger: 'change'},], // 社会信用代码证
          registerCertificateOneFileId:[{validator: registerOneFile, trigger: 'change'},],//签字注会1证书
          registerCertificateTwoFileId:[{validator: registerTwoFile, trigger: 'change'},],//签字注会2证书*/
          registerUploadFileId:[{validator: registerUploadFile, trigger: 'change'},],//上传材料
          province: [{ required: true, trigger: "change", message: "所属省份不能为空" }], // 所属省份 20
          district: [{ required: true, trigger: "blur", message: "所属区县不能为空" }], // 所属区县 20
          unifiedSocialCreditCode: [{ required: true, trigger: "blur", message: "事务所编号不能为空" }], // 统一社会信用代码 50
          mailingAddress: [{ required: true, trigger: "blur", message: "通信地址不能为空" }], // 通信地址 100
          contacts: [{ required: true, trigger: "blur", message: "联系人不能为空" }], // 联系人 10
          phoneNumberOfContactPerson:  [
            { required: true, message: "联系人手机号不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ], // 联系人手机号 20
        },
        loading: false,
        redirect: undefined,
        fileList1: [], // 上传 文件列表（唯一）
        fileList2: [], // 上传 文件列表（唯一）
        fileList3:[],// 上传 文件列表（唯一）
        fileList4:[],// 上传 文件列表（唯一）
        fileListZip:[],
        resultData: {}, // 上传后 数据结果
        // 上传
        upload: {
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/ftp/upload",
        },
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getCode();
    },
    methods: {
      getCode() {
        getCodeImg().then(res => {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.form.uuid = res.uuid;
        });
      },
      templateofficeRegister() {
        window.open(process.env.VUE_APP_BASE_API + "/office/template/officeRegister");
      },
      handleRegister() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true;
            registerOffice(this.form).then(res => {
              this.loading = false;
              this.$confirm('注册成功,待工作人员审核!', '提示', {
                confirmButtonText: '确定',
                showClose: false,
                showCancelButton: false,
                type: 'success'
              }).then(() => {
                this.$router.push({ path: '/login'})
              });
            }).catch(() => {
              this.loading = false;
              this.getCode();
            });
          }
        });
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isPDF = file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG && !isPNG && !isPDF) {
          this.$message.error('上传证书图片只能是 JPG或PNG 或 PDF 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传证书图片大小不能超过 100MB!');
        }
        return isJPG || isPNG || isPDF && isLt2M;
      },
      beforeAvatarZipUpload(file) {
        const isZip = file.type === 'application/x-zip-compressed';
        if (!isZip) {
          this.$message.error('上传附件只允许上传 zip 格式!');
        }
        return isZip;
      },
      /** 移除文件 处理 */
      handleRemoveZip(file, fileList) { // 移除
        this.form.registerUploadFileId = ''
      },
      handleChangeZip(file, fileList) {
        if (fileList.length > 0) {
          this.fileListZip = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      /** 移除文件 处理 */
      handleRemove1(file, fileList) { // 移除
        this.form.practiceCertificateFileId = ''
      },
      /** 移除文件 处理 */
      handleRemove2(file, fileList) { // 移除
        this.form.accountantCertificateFileId = ''
      },
      /** 移除文件 处理 */
      handleRemove3(file, fileList) { // 移除
        this.form.registerCertificateOneFileId = ''
      },
      /** 移除文件 处理 */
      handleRemove4(file, fileList) { // 移除
        this.form.registerCertificateTwoFileId = ''
      },
      handleChange1(file, fileList) {
        if (fileList.length > 0) {
          this.fileList1 = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      handleChange2(file, fileList) {
        if (fileList.length > 0) {
          this.fileList2 = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      handleChange3(file, fileList) {
        if (fileList.length > 0) {
          this.fileList3 = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      handleChange4(file, fileList) {
        if (fileList.length > 0) {
          this.fileList4 = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      /** 文件上传 成功 处理 */
      handleFileSuccess1(response, file, fileList) {
        this.$refs.form.clearValidate(['practiceCertificateFileId']); // 清空单一校验
        this.form.practiceCertificateFileId = response.fileId;

      },
      /** 文件上传 成功 处理 */
      handleFileSuccessZip(response, file, fileList) {
        this.$refs.form.clearValidate(['registerUploadFileId']); // 清空单一校验
        this.form.registerUploadFileId = response.fileId;

      },
      /** 文件上传 成功 处理 */
      handleFileSuccess2(response, file, fileList) {
        this.$refs.form.clearValidate(['accountantCertificateFileId']); // 清空单一校验
        this.form.accountantCertificateFileId = response.fileId;
      },
      /** 文件上传 成功 处理 */
      handleFileSuccess3(response, file, fileList) {
        this.$refs.form.clearValidate(['registerCertificateOneFileId']); // 清空单一校验
        this.form.registerCertificateOneFileId = response.fileId;

      },
      /** 文件上传 成功 处理 */
      handleFileSuccess4(response, file, fileList) {
        this.$refs.form.clearValidate(['registerCertificateTwoFileId']); // 清空单一校验
        this.form.registerCertificateTwoFileId = response.fileId;

      },
      /** 文件上传 失败 处理 */
      handleFileError1(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
      /** 文件上传 失败 处理 */
      handleFileErrorZip(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
      /** 文件上传 失败 处理 */
      handleFileError2(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
      /** 文件上传 失败 处理 */
      handleFileError3(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
      /** 文件上传 失败 处理 */
      handleFileError4(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .register {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-image: url("../assets/image/bg.png");
    background-size: cover;
  }
  .rightView{
    float: right;
    padding-top: 60px;
    width: 700px;
    min-height: 100%;
    background: #fff;
  }
  .title {
    margin: 0 auto 10px auto;
    font-size: 20px;
    text-align: center;
    color: #004B9E;
    font-weight: 400;
  }

  .register-form {
    margin: 0 auto;
    width: 600px;
    border-radius: 6px;
    background: #ffffff;

    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .register-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .register-code-img {
    height: 38px;
  }
  .el-register-footer {
    position: fixed;
    bottom: 100px;
    left: 100px;
    width: 700px;
    text-align: center;
    color: #555;
    font-size: 12px;
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';  // 去掉 * 号
    color: #ff4949;
    margin-right: 4px;
  }
/*  ::v-deep .el-form--label-top .el-form-item__label{
    height: 50px;
  }
*/
  ::v-deep .el-button--primary {
    color: #fff;
    background-color: #4164E3;
    border-color: #4164E3;
  }
  .uploadBtn{
    height: 40px;
    width: 100%;
    color: #848ae3;
    background: #e8f0fb;
    border-color: #e8f0fb;
    font-size: 14px;
    &:hover,&:focus{
      color: #4164E3;
      background: #e8f0fb;
      border-color: #e8f0fb;
    }
  }
  .upload-demo{
    ::v-deep .el-upload{
      display: block;
    }
  }


</style>
